﻿<template>
  <div class="form-container">
    <!-- <el-collapse v-model="activeNames">
    <el-collapse-item title="明细" name="1"> -->
    <el-form
      ref="dataForm"
      :rules="rules"
      :model="temp"
      label-position="right"
      class="form-container"
    >
      <sticky v-if="isPreview === false" :z-index="10" :class-name="'sub-navbar draft'">
        <el-button
          v-loading="loading"
          style="margin-left: 10px;"
          type="primary"
          @click="isEdit === false ? createData() : updateData()"
        >保存</el-button>
      </sticky>
      <div class="form-main-container">
        <el-row v-if="false">
          <el-input v-model="temp.id" type="hidden" />
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label-width="100px" label="租户编码:" prop="tenantId" class="form-container-item">
              <el-input v-model="temp.tenantId" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label-width="100px" label="租户名称:" prop="tenantName" class="form-container-item">
              <el-input v-model="temp.tenantName" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label-width="100px" label="用户编码:" prop="userId" class="form-container-item">
              <el-input v-model="temp.userId" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label-width="100px" label="用户名称:" prop="userName" class="form-container-item">
              <el-input v-model="temp.userName" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label-width="100px" label="客户编码:" prop="clientId" class="form-container-item">
              <el-input v-model="temp.clientId" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label-width="100px" label="客户名称:" prop="clientName" class="form-container-item">
              <el-input v-model="temp.clientName" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label-width="100px" label="扩展属性:" prop="extraProperties" class="form-container-item">
              <el-input v-model="temp.extraProperties" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label-width="100px" label="应用名称:" prop="applicationName" class="form-container-item">
              <el-input v-model="temp.applicationName" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label-width="100px" label="请求路径:" prop="url" class="form-container-item">
              <el-input v-model="temp.url" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label-width="100px" label="调用时间:" prop="executionTime" class="form-container-item">
              <el-date-picker
                v-model="temp.executionTime"
                value-format="yyyy-MM-dd HH:mm:ss"
                type="datetime"
                placeholder="选择日期"
                style="width: 100%;"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label-width="100px" label="响应时间:" prop="executionDuration" class="form-container-item">
              <el-input v-model="temp.executionDuration" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label-width="100px" label="IP:" prop="clientIpAddress" class="form-container-item">
              <el-input v-model="temp.clientIpAddress" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label-width="100px" label="关联编码:" prop="correlationId" class="form-container-item">
              <el-input v-model="temp.correlationId" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label-width="100px" label="请求方法:" prop="httpMethod" class="form-container-item">
              <el-input v-model="temp.httpMethod" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label-width="100px" label="响应状态:" prop="httpStatusCode" class="form-container-item">
              <el-input v-model="temp.httpStatusCode" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label-width="100px" label="浏览器信息:" prop="browserInfo" class="form-container-item">
              <el-input v-model="temp.browserInfo" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label-width="100px" label="说明:" prop="comments" class="form-container-item">
              <el-input v-model="temp.comments" />
            </el-form-item>
          </el-col>
          <el-col :span="18">
            <el-form-item label-width="100px" label="异常信息:" prop="exceptions" class="form-container-item">
              <el-input v-model="temp.exceptions" />
            </el-form-item>
          </el-col>
        </el-row>
      </div>
    </el-form>
    <!-- </el-collapse-item>
    </el-collapse> -->
    <el-card :body-style="{ padding: '10px', height:'auto'}" class="box-card">
      <div slot="header" class="clearfix">
        <span>操作信息</span>
      </div>
      <el-row style="margin-top: 10px;">
        <el-table
          key="id"
          style="width: 100%"
          :data="temp.actions"
        >
          <el-table-column fixed label="服务名称" width="510px" align="center" show-overflow-tooltip>
            <template slot-scope="scope">
              <span>{{ scope.row.serviceName }}</span>
            </template>
          </el-table-column>
          <el-table-column fixed label="方法名称" width="110px" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.methodName }}</span>
            </template>
          </el-table-column>
          <el-table-column fixed label="参数列表" width="210px" align="center" show-overflow-tooltip>
            <template slot-scope="scope">
              <span>{{ scope.row.parameters }}</span>
            </template>
          </el-table-column>
          <el-table-column fixed label="执行时间" width="200px" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.executionTime | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
            </template>
          </el-table-column>
          <el-table-column fixed label="执行时长" width="100px" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.executionDuration }}</span>
            </template>
          </el-table-column>
        </el-table>
      </el-row>
    </el-card>
  </div>
</template>

<script>
import Sticky from '@/components/Sticky' // 粘性header组件
import { create, get, update } from '@/api/auditLogs'

export default {
  name: 'AuditLogsDetail',
  components: { Sticky },
  props: {
    isEdit: {
      type: Boolean,
      default: false
    },
    isPreview: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      temp: {
        id: '',
        extraProperties: '',
        concurrencyStamp: '',
        applicationName: '',
        userId: '',
        userName: '',
        tenantId: '',
        tenantName: '',
        impersonatorUserId: '',
        impersonatorTenantId: '',
        executionTime: '',
        executionDuration: 0,
        clientIpAddress: '',
        clientName: '',
        clientId: '',
        correlationId: '',
        browserInfo: '',
        httpMethod: '',
        url: '',
        exceptions: '',
        comments: '',
        httpStatusCode: 0,
        actions: []
      },
      dialogFormVisible: false,
      dialogStatus: '',
      textMap: {
        update: '编辑',
        create: '添加',
        preview: '查看'
      },
      rules: {
        executionTime: [{ required: true, message: '必须填写', trigger: 'blur' }],
        executionDuration: [{ required: true, message: '必须填写', trigger: 'blur' }]
      },
      downloadLoading: false,
      loading: false,
      tempRoute: {},
      activeNames: ['1']
    }
  },
  created() {
    this.tempRoute = Object.assign({}, this.$route)
    if (this.isEdit) {
      const id = this.$route.params && this.$route.params.id
      this.handleUpdate(id)
    } else {
      this.handleCreate()
    }
  },
  methods: {
    resetTemp() {
      this.temp = {
        extraProperties: '',
        concurrencyStamp: '',
        applicationName: '',
        userId: '',
        userName: '',
        tenantId: '',
        tenantName: '',
        impersonatorUserId: '',
        impersonatorTenantId: '',
        executionTime: '',
        executionDuration: 0,
        clientIpAddress: '',
        clientName: '',
        clientId: '',
        correlationId: '',
        browserInfo: '',
        httpMethod: '',
        url: '',
        exceptions: '',
        comments: '',
        httpStatusCode: 0
      }
    },
    handleCreate() {
      this.resetTemp()
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    createData() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          this.loading = true
          create(this.temp).then(() => {
            this.$notify({
              title: '成功',
              message: '添加成功',
              type: 'success',
              duration: 2000
            })
          }).catch(err => {
            console.log(err)
          }).finally(() => {
            this.loading = false
          })
        }
      })
    },
    handleUpdate(id) {
      get(id).then(response => {
        this.temp.id = response.data.id
        this.temp.extraProperties = response.data.extraProperties
        this.temp.concurrencyStamp = response.data.concurrencyStamp
        this.temp.applicationName = response.data.applicationName
        this.temp.userId = response.data.userId
        this.temp.userName = response.data.userName
        this.temp.tenantId = response.data.tenantId
        this.temp.tenantName = response.data.tenantName
        this.temp.impersonatorUserId = response.data.impersonatorUserId
        this.temp.impersonatorTenantId = response.data.impersonatorTenantId
        this.temp.executionTime = response.data.executionTime
        this.temp.executionDuration = response.data.executionDuration
        this.temp.clientIpAddress = response.data.clientIpAddress
        this.temp.clientName = response.data.clientName
        this.temp.clientId = response.data.clientId
        this.temp.correlationId = response.data.correlationId
        this.temp.browserInfo = response.data.browserInfo
        this.temp.httpMethod = response.data.httpMethod
        this.temp.url = response.data.url
        this.temp.exceptions = response.data.exceptions
        this.temp.comments = response.data.comments
        this.temp.httpStatusCode = response.data.httpStatusCode
        this.temp.concurrencyStamp = response.data.concurrencyStamp
        this.temp.actions = response.data.actions
        this.dialogStatus = 'update'
        this.dialogFormVisible = true
        this.$nextTick(() => {
          this.setTagsViewTitle()
          this.$refs['dataForm'].clearValidate()
        })
      })
    },
    updateData() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          this.loading = true
          const tempData = Object.assign({}, this.temp)
          const { id } = this.temp
          update(id, tempData).then(() => {
            this.$notify({
              title: '成功',
              message: '修改成功',
              type: 'success',
              duration: 2000
            })
          }).finally(() => {
            this.loading = false
          })
        }
      })
    },
    setTagsViewTitle() {
      let title = this.textMap.create
      if (this.temp.id) {
        title = this.textMap.update
      }
      if (this.isPreview) {
        title = this.textMap.preview
      }

      const route = Object.assign({}, this.tempRoute, { title: `${title}-${this.temp.id}` })
      this.$store.dispatch('tagsView/updateVisitedView', route)
    }
  }
}
</script>
<style lang="scss" scoped>
@import "~@/styles/mixin.scss";

.form-container {
  position: relative;

  .form-main-container {
    padding: 20px 20px 20px 20px;

    .el-form-item{
      margin-bottom: 5px;
    }

    .form-container {
      position: relative;
      @include clearfix;
      margin-bottom: 5px;

      .form-container-item {
        float: left;
      }
    }
  }
}
</style>
